<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript" src="dist/bundle.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/style/green.css">
    <style type="text/css">
        .green-tooltip-text {
            background-color: rgba(255,255,255,0.5);
        }
    </style>
</head>
<body onload="load()" style="height: 100%; width: 100%; margin: 0; overflow: hidden;">
    <div id="foo" style="width: 100%; height: 100%;; position: absolute; z-index: 2;"></div>
    <div id="image" style="width: 100%;; height: 100%;; position: absolute; z-index: 1; background: url(assets/img/bg.jpg); background-repeat: no-repeat; background-size: 100% 100%;"></div>

    <div style="position: absolute; z-index: 10; top: 10px; left: 10px">
        <div style="padding: 5px"><input style="width:120px;" id="x"/><input style="width:120px;" id="y"><input style="width:120px;" id="zoom"></div>
        <div style="padding: 5px"><input style="width:120px;" id="x1"/><input style="width:120px;" id="x2"><input style="width:120px;" id="y1"><input style="width:120px;" id="y2"></div>
        <div style="padding: 5px"><input style="width:120px;" id="a"/><input style="width:120px;" id="d"><input style="width:120px;" id="e"><input style="width:120px;" id="f"></div>
    </div>

    <div style="position: absolute; z-index: 10; top: 50%; left: 50%; width: 100px; height: 100px; background: lightsteelblue; "></div>
    <div id="popup" style="width: 300px; height: 180px; background: rgba(255,240,245, 0.5); padding: 5px;"></div>
</body>
</html>